<template>
  <div class="permission">
    <div class="u-header">
      <div class="u-h-title">
        <i class="iconfont icon-quanxianguanli"></i>权限管理
      </div>
    </div>
    <div class="u-search">
      <n-button
        class="u-s-btn"
        size="small"
        round
        type="error"
        @click="confirmDelete"
        ><i class="iconfont icon-shanchu"></i>批量删除</n-button
      >
      <n-button
        class="u-s-btn"
        size="small"
        round
        type="success"
        @click="openAddRole"
        ><i class="iconfont icon-tianjia"></i>新增角色</n-button
      >
    </div>
    <div class="u-table">
      <el-table
        ref="roleTable"
        class="table"
        :data="allRoleList"
        size="small"
        stripe
        v-loading="roleLoading"
        row-key="id"
        @selection-change="changeSelect"
      >
        <el-table-column
          type="selection"
          width="55"
          reserve-selection
          :selectable="checkSelectable"
        />
        <el-table-column type="index" label="序号" align="center" />
        <el-table-column
          prop="name"
          label="用户名"
          align="center"
        ></el-table-column>
        <el-table-column prop="unKey" label="关键词"> </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="updateTime"
          label="更新时间"
          align="center"
        ></el-table-column>
        <el-table-column prop="status" label="操作" align="center">
          <template #default="scoped">
            <div class="u-t-comparation">
              <n-button
                class="nbtn"
                size="tiny"
                type="info"
                :disabled="
                  scoped.row.unKey == 'superAdmin' || scoped.row.unKey == 'user'
                "
                @click="openAddRole(scoped.row)"
              >
                <i class="iconfont icon-bianji"></i>
              </n-button>
              <el-popconfirm
                title="确定删除该角色吗?"
                :confirm-button-text="'确定'"
                :cancel-button-text="'取消'"
                @confirm="deleteRole(scoped.row.id)"
              >
                <template #reference>
                  <n-button
                    class="nbtn"
                    size="tiny"
                    type="error"
                    :disabled="
                      scoped.row.unKey == 'superAdmin' ||
                      scoped.row.unKey == 'user'
                    "
                  >
                    <i class="iconfont icon-shanchu"></i>
                  </n-button>
                </template>
              </el-popconfirm>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <addRoleDialog ref="addrole" @regetRoleList="getALLRole"></addRoleDialog>
  </div>
</template>
<script setup>
import { reactive, ref, onMounted, watch } from "vue";
import { getAllRoleAPI, deleteRoleAPI } from "@/api/adminAPI/adminAPI";
import addRoleDialog from "@/components/adminComponents/addRoleDialog/addRoleDialog.vue";
import useStore from "@/store";
import { ElMessage, ElMessageBox } from "element-plus";
const store = useStore();

const allRoleList = ref([]);
const choiseList = ref([]);
const roleLoading = ref(true);
const addrole = ref(null);
const roleTable = ref(null);

const changeSelect = (data) => {
  choiseList.value = data;
};
const openAddRole = (data = null) => {
  addrole.value.open(data);
};
const checkSelectable = (row) => {
  return row.unKey != "superAdmin";
};
const confirmDelete = () => {
  if (!choiseList.value.length) {
    ElMessage.error("请选择要删除的角色");
    return;
  }
  ElMessageBox.confirm("", "确定删除这些角色吗?", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      deleteRole();
    })
    .catch(() => {});
};

const getALLRole = async () => {
  try {
    const response = await getAllRoleAPI();
    const { code, data, msg } = response.data;
    if (code == 200) {
      allRoleList.value = data;
    }
  } catch (err) {
    console.log(err);
  } finally {
    roleLoading.value = false;
  }
};

const deleteRole = async (roleId = null) => {
  try {
    const response = await deleteRoleAPI(
      roleId ? [roleId] : choiseList.value.map((item) => item.id)
    );
    const { code, data, message } = response.data;
    if (code == 200) {
      ElMessage.success("删除成功");
      getALLRole();
      if (!roleId) {
        roleTable.value.clearSelection();
      }
    } else {
      ElMessage.error(message);
    }
  } catch (err) {
    console.log(err);
  }
};

onMounted(() => {
  getALLRole();
});
</script>
<style lang="less" scoped>
.permission {
  margin: auto;
  width: 96%;
  height: 92vh;
  padding: 10px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 12px 12px 50px #d9d9d9, -12px -12px 50px #ffffff;
  display: flex;
  flex-direction: column;

  .u-header {
    display: flex;

    .u-h-title {
      height: 30px;
      line-height: 30px;
      font-size: 20px;
      font-weight: 600;
      color: #555;
      display: flex;
      text-align: center;

      .iconfont {
        margin: auto 0;
        font-weight: 700;
        font-size: 26px;
        height: 30px;
      }
    }
  }

  .u-search {
    display: flex;
    justify-content: right;
    height: 30px;
    line-height: 30px;
    margin: 20px 0 0 0;
    padding-bottom: 10px;
    border-bottom: 2px solid @lineColor;

    .u-s-btn {
      margin: auto 10px;
    }
  }

  .u-table {
    width: 100%;
    margin: 10px auto 0 auto;
    border: 1px solid #efefef;

    .table {
      height: 72vh;

      .u-t-comparation {
        display: flex;
        justify-content: center;

        .nbtn {
          margin: auto 5px;
        }
      }
    }
  }

  .r-footer {
    margin: auto auto 0 auto;
    display: flex;
    justify-content: center;
  }
}
</style>
